<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <!-- 加载小程序基础库（必须） -->
		<script src="https://dfc643.gitee.io/xwlink-mapps/mAppInit.js" type="text/javascript"></script>
	</head>
	<body style="opacity:0">
		<style>
			.mui-btn {
				width: 97%;
				margin-bottom: 0.5em;
			}
			.mui-table-view {
				border-radius: 15px;
				overflow: hidden;
				width: calc(100% - 2em);
				margin: 1em;
			}
			.mui-table-view-cell {
				margin: 0;
				border-radius: 0;
			}
			.mui-switch {
				transform: scale(0.8);
				float: right;
				margin-right: 0.5em;
			}
			.mui-input-row label {
				width: 70%;
			}
			textarea {
				margin: 0 1em;
				padding: 0;
				width: calc(100% - 2em);
				font-size: 0.8em;
				font-family: monospace;
			}
		</style>
		<div>
			<!-- 标题栏 -->
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">内网穿透（示例）</h1>
			</header>
			
			<!-- 内容主体（必须包含 xw-blur） -->
			<div class="mui-content xw-blur">
				
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>启用内网穿透</label>
						<div class="mui-switch" id="xwFrpSwitch" style="float:left">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
					<div class="mui-input-row">
						<label>启用 FRP 客户端</label>
						<div class="mui-switch" id="xwFrpcSwitch" style="float:left">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
					<div class="mui-input-row">
						<label>启用 FRP 服务端</label>
						<div class="mui-switch" id="xwFrpsSwitch" style="float:left">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
				</form>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>FRP 配置文件</label>
					</div>
					<textarea id="txtFrpConfig" style="height:200px" wrap="off"></textarea>
				</form>

				<!-- 底部按钮区域 -->
				<div class="mui-content-padded" align="center">
					<button type="button" id="xwApply" class="mui-btn mui-btn-blue" onclick="SysApply()">应用设置</button>
				</div>
				
			</div>
		</div>
		<script type="text/javascript">
			/**
			 * 初始化小程序
			 * 此方法必须存在，是小程序被调用的第一个方法
			 */
			mAppInit = function() {
				
				/**
				 * 启动加载中界面
				 * @参数1 {布尔型} True:弹出加载中界面，False:关闭加载中界面
				 * @参数2 {方法} 当打开/关闭弹窗后，执行的回调方法，没有方法时填写 xwNullObj
				 */
				xwLoading(true, xwNullObj);
				
				/**
				 * 从路由器读取参数信息
				 * @参数1 {字符串} 从路由器读取信息的页面路径（含参数）
				 * @参数2 {方法} 成功执行时的回调方法
				 * @参数3 {方法} 执行失败时的回调方法
				 */
				xwlink_get(`Advanced_Extensions_frp.asp`, function(data) {
					xwLoading(false, function() { // 关闭加载中弹窗，并执行回调方法（成功时）

						// 从网页中提取数据
						var frpSwitchStatus = data.match(/id="frp_enable_fake" *value=([0-1])/)[1];
						var frpcSwitchStatus = data.match(/id="frpc_enable_fake" *value=([0-1])/)[1];
						var frpsSwitchStatus = data.match(/id="frps_enable_fake" *value=1/);
						var frpConfig = data.match(/name="scripts.frp_script.sh"[^>]+>([^]*)<\/textarea>/)[1];
						
						// 将数据展示到 UI 控件上（切换开关）
						if (frpSwitchStatus === "1") mui('#xwFrpSwitch').switch().toggle();
						if (frpcSwitchStatus === "1") mui('#xwFrpcSwitch').switch().toggle();
						if (frpsSwitchStatus !== null) mui('#xwFrpsSwitch').switch().toggle();
						
						// 文本框赋值
						txtFrpConfig.value = frpConfig;
						
					});
				}, function() {
					xwLoading(false, function() { // 关闭加载中弹窗，并执行回调方法（失败时）
						mui.toast("从路由器读取信息失败");
					});
				})
				
			}

			
			/**
			 * 应用设置按钮事件
			 */
			function SysApply() {
				
				// 打开加载中界面
				xwLoading(true, xwNullObj);
				
				// 获取开关控件状态
				var frpSwitchStatus = xwFrpSwitch.classList.contains('mui-active') ? "1" : "0";
				var frpcSwitchStatus = xwFrpcSwitch.classList.contains('mui-active') ? "1" : "0";
				var frpsSwitchStatus = xwFrpsSwitch.classList.contains('mui-active') ? "1" : "0";
				
				/**
				 * 路由器参数发送
				 * @参数1 {字符串} 路由器接受参数的后端路径（抓包获取）
				 * @参数2 {方法} 成功执行时的回调方法
				 * @参数3 {方法} 执行失败时的回调方法
				 * 特别说明：
				 *   请求参数请通过浏览器开发者工具，抓包获取！
				 *   注意：路由器原来的 action_mode 请求是 +Apply+ 一定要将 + 替换成空格
				 */
				xwlink_post("start_apply.htm",
				{
					current_page: "/Advanced_Extensions_frp.asp",
					sid_list: "LANHostConfig;General;",
					action_mode: " Apply ",
					action_script: "",
					frp_enable: frpSwitchStatus,
					frpc_enable: frpcSwitchStatus,
					frps_enable: frpsSwitchStatus,
					frp_version: "9",
					"scripts.frp_script.sh": txtFrpConfig.value
				},
				function () {
					xwLoading(false, function() {
						mui.toast("设置已应用");
					});
				}, function () {
					xwLoading(false, function() {
						mui.alert("应用设置失败！");
					});
				}) 
				
			}
		</script>
	</body>
</html>
